<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成果发表演示</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 20px;
            background-color: #f5f7fa;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .login-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .login-form {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .login-form input, .login-form button {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .login-form button {
            background: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        
        .login-form button:hover {
            background: #0056b3;
        }
        
        .status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }
        
        .status.success {
            background: #d4edda;
            color: #155724;
        }
        
        .status.error {
            background: #f8d7da;
            color: #721c24;
        }
        
        .test-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .test-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        
        .test-buttons button {
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .btn-primary { background: #007bff; color: white; }
        .btn-success { background: #28a745; color: white; }
        .btn-warning { background: #ffc107; color: #212529; }
        .btn-danger { background: #dc3545; color: white; }
        
        .result {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            border-left: 4px solid #007bff;
            margin-top: 15px;
        }
        
        .result pre {
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        .iframe-container {
            margin-top: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .iframe-container iframe {
            width: 100%;
            height: 800px;
            border: none;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🚀 成果发表功能演示</h1>
        <p>测试成果发表的创建、查看、编辑、删除和搜索功能</p>
    </div>

    <!-- 登录区域 -->
    <div class="login-section">
        <h3>🔐 登录测试</h3>
        <div class="login-form">
            <input type="text" id="username" placeholder="用户名" value="sbxnh">
            <input type="password" id="password" placeholder="密码" value="123456">
            <button onclick="login()">登录</button>
            <button onclick="checkLoginStatus()">检查登录状态</button>
        </div>
        <div id="loginStatus"></div>
    </div>

    <!-- API测试区域 -->
    <div class="test-section">
        <h3>🔧 成果API功能测试</h3>
        <div class="test-buttons">
            <button class="btn-primary" onclick="testGetPublications()">获取成果列表</button>
            <button class="btn-primary" onclick="testGetUserPublications()">获取用户成果</button>
            <button class="btn-primary" onclick="testGetStats()">获取统计信息</button>
            <button class="btn-success" onclick="testCreatePublication()">创建测试成果</button>
            <button class="btn-warning" onclick="testUpdatePublication()">更新成果</button>
            <button class="btn-danger" onclick="testDeletePublication()">删除成果</button>
            <button class="btn-primary" onclick="testSearchPublications()">搜索成果</button>
        </div>
        <div id="testResult"></div>
    </div>

    <!-- 完整成果发表界面 -->
    <div class="test-section">
        <h3>📚 完整成果发表界面</h3>
        <p>下面是完整的成果发表界面，包含所有功能：</p>
        <div class="iframe-container">
            <iframe src="publications.html"></iframe>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080';
        let token = '';

        // 登录功能
        async function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const statusDiv = document.getElementById('loginStatus');

            try {
                const response = await fetch(`${API_BASE}/auth/login`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username, password })
                });

                if (response.ok) {
                    const data = await response.json();
                    token = data.token;
                    localStorage.setItem('token', token);
                    statusDiv.innerHTML = '<div class="status success">✅ 登录成功！</div>';
                } else {
                    statusDiv.innerHTML = '<div class="status error">❌ 登录失败</div>';
                }
            } catch (error) {
                statusDiv.innerHTML = '<div class="status error">❌ 网络错误</div>';
            }
        }

        // 检查登录状态
        function checkLoginStatus() {
            const savedToken = localStorage.getItem('token');
            const statusDiv = document.getElementById('loginStatus');
            
            if (savedToken) {
                token = savedToken;
                statusDiv.innerHTML = '<div class="status success">✅ 已登录</div>';
            } else {
                statusDiv.innerHTML = '<div class="status error">❌ 未登录</div>';
            }
        }

        // 通用API请求
        async function apiRequest(endpoint, options = {}) {
            if (!token) {
                token = localStorage.getItem('token');
                if (!token) {
                    throw new Error('请先登录');
                }
            }

            const response = await fetch(`${API_BASE}${endpoint}`, {
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json',
                    ...options.headers
                },
                ...options
            });

            if (!response.ok) {
                const errorText = await response.text();
                throw new Error(`HTTP ${response.status}: ${errorText}`);
            }

            return await response.json();
        }

        // 显示测试结果
        function showResult(title, data) {
            const resultDiv = document.getElementById('testResult');
            resultDiv.innerHTML = `
                <div class="result">
                    <h4>${title}</h4>
                    <pre>${JSON.stringify(data, null, 2)}</pre>
                </div>
            `;
        }

        // 显示错误
        function showError(title, error) {
            const resultDiv = document.getElementById('testResult');
            resultDiv.innerHTML = `
                <div class="result" style="border-left-color: #dc3545;">
                    <h4 style="color: #dc3545;">${title}</h4>
                    <pre style="color: #dc3545;">${error.message}</pre>
                </div>
            `;
        }

        // 测试获取成果列表
        async function testGetPublications() {
            try {
                const publications = await apiRequest('/publications');
                showResult('📚 成果列表', publications);
            } catch (error) {
                showError('获取成果列表失败', error);
            }
        }

        // 测试获取用户成果
        async function testGetUserPublications() {
            try {
                const publications = await apiRequest('/publications/user');
                showResult('👤 用户成果列表', publications);
            } catch (error) {
                showError('获取用户成果失败', error);
            }
        }

        // 测试获取统计信息
        async function testGetStats() {
            try {
                const stats = await apiRequest('/publications/stats');
                showResult('📊 成果统计信息', stats);
            } catch (error) {
                showError('获取统计信息失败', error);
            }
        }

        // 测试创建成果
        async function testCreatePublication() {
            try {
                const publicationData = {
                    title: '测试成果 ' + new Date().getTime(),
                    type: 'JOURNAL',
                    status: 'PUBLISHED',
                    authors: '张三, 李四, 王五',
                    journal: '测试期刊',
                    abstractText: '这是一个通过API创建的测试成果摘要。',
                    keywords: '测试, API, 成果发表',
                    publishDate: '2024-01-15',
                    doi: '10.1000/test.' + new Date().getTime(),
                    impactFactor: 3.5,
                    citationCount: 10
                };

                const newPublication = await apiRequest('/publications', {
                    method: 'POST',
                    body: JSON.stringify(publicationData)
                });

                showResult('✅ 成果创建成功', newPublication);
            } catch (error) {
                showError('创建成果失败', error);
            }
        }

        // 测试更新成果
        async function testUpdatePublication() {
            try {
                const publications = await apiRequest('/publications');
                if (publications.length === 0) {
                    throw new Error('没有可更新的成果，请先创建成果');
                }

                const publicationToUpdate = publications[0];
                const updateData = {
                    title: publicationToUpdate.title + ' (已更新)',
                    abstractText: '成果摘要已更新 - ' + new Date().toLocaleString(),
                    citationCount: (publicationToUpdate.citationCount || 0) + 5
                };

                const updatedPublication = await apiRequest(`/publications/${publicationToUpdate.id}`, {
                    method: 'PUT',
                    body: JSON.stringify(updateData)
                });

                showResult('✅ 成果更新成功', updatedPublication);
            } catch (error) {
                showError('更新成果失败', error);
            }
        }

        // 测试删除成果
        async function testDeletePublication() {
            if (!confirm('确定要删除一个测试成果吗？')) {
                return;
            }

            try {
                const publications = await apiRequest('/publications');
                if (publications.length === 0) {
                    throw new Error('没有可删除的成果');
                }

                // 找到测试成果
                const testPublication = publications.find(p => p.title && p.title.includes('测试'));
                if (!testPublication) {
                    throw new Error('没有找到测试成果');
                }

                const result = await apiRequest(`/publications/${testPublication.id}`, {
                    method: 'DELETE'
                });

                showResult('✅ 成果删除成功', { 
                    message: '成果删除成功',
                    deletedPublication: testPublication
                });
            } catch (error) {
                showError('删除成果失败', error);
            }
        }

        // 测试搜索成果
        async function testSearchPublications() {
            try {
                const publications = await apiRequest('/publications/search?keyword=测试');
                showResult('🔍 搜索结果', publications);
            } catch (error) {
                showError('搜索成果失败', error);
            }
        }

        // 页面加载时检查登录状态
        window.onload = function() {
            checkLoginStatus();
        };
    </script>
</body>
</html>
